<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">-->
    <link rel="stylesheet" href="layui/css/layui.css" />
    <link rel="stylesheet" href="js/virtualkeyboard.css" />
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<blockquote class="layui-elem-quote layui-text">
    终端绑定信息页面
</blockquote>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>终端绑定信息页面</legend>
</fieldset>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">PCID</label>
        <div class="layui-input-block">
            <input id="PCID" type="text" style="width: 300px" readonly="readonly" value="" name="phone" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地市</label>
        <div class="layui-input-block" style="width: 300px">
            <div id="cityId" class="xm-select-demo"></div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">团队</label>
        <div id="orgIdP" class="layui-input-block" style="width: 300px">
            <div id="orgId" class="xm-select-demo"></div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">员工</label>
        <div id="staffIdP" class="layui-input-block" style="width: 300px">
            <div id="staffId" class="xm-select-demo"></div>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">虚拟键盘</label>
        <div  class="layui-input-block" style="width: 300px">
            <input id="testi" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <button id="submitBtn" class="layui-btn" type="button" style="margin: 0px 0px 0px 340px;" lay-submit="" lay-filter="demo2">提交</button>
    </div>
</form>

<!--<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>-->
<script language="JavaScript" src="layui/layui.all.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script language="JavaScript"src="js/xm-select.js"></script>
<script language="JavaScript"src="js/jquery.min.js"></script>
<script language="JavaScript"src="https://unpkg.com/axios@0.21.4/dist/axios.min.js"></script>
<!--<script language="JavaScript"src="https://unpkg.com/axios@0.21.4/dist/axios.min.js"></script>-->
<script>
    var cityXmS = xmSelect.render({
        el: '#cityId',
        filterable: true,
        radio: true,
        paging: true,
        pageSize: 9,
        data: [
            {name: '福州', value: '0591'},
            {name: '厦门', value: '0592'},
            {name: '宁德', value: '0593'},
            {name: '莆田', value: '0594'},
            {name: '泉州', value: '0595'},
            {name: '漳州', value: '0596'},
            {name: '龙岩', value: '0597'},
            {name: '三明', value: '0598'},
            {name: '南平', value: '0599'},
        ],
        on:function(data){
            console.log(data.arr);
            /*var list = [{
                "name":"test",
                "value":"1"
            }]
            orgXmS.update({
                "data":list
            });*/
        },
        hide:function(){
            console.log("下拉隐藏");
            $("#orgIdP").empty();
            $("#orgIdP").append("<div id=\"orgId\" class=\"xm-select-demo\"></div>")
            orgXmS = initOrgXmS();
        }
    });

    var orgXmS = initOrgXmS();
    function initOrgXmS(){
        return  xmSelect.render({
            el: '#orgId',
            filterable: true,
            radio: true,
            //配置远程分页
            paging: true,
            pageSize: 3,//不起效果
            pageRemote: true,
            remoteSearch: true,
            //数据处理
            remoteMethod: function(val, cb, show, pageIndex){
                //val: 搜索框的内容, 不开启搜索默认为空, cb: 回调函数, show: 当前下拉框是否展开, pageIndex: 当前第几页
                var cityCode = cityXmS.getValue("value")[0];
                var channelName = val;
                var pageCurrent = pageIndex;
                var pageSize = "10";

                if(!cityCode){
                    //alert("请选择地市");
                    return cb([]);
                }


                //这里的axios类似于ajax
                var paramDate = {
                    "CITYCODE":cityCode,
                    "CHANNEL_NAME":channelName,
                    "pageCurrent":pageCurrent,
                    "pageSize":pageSize
                };
                var test = "test";
                var ajaxOrgResult = ajaxOrg(paramDate);
                ajaxOrgResult.done(
                    function (res){
                        console.log(test);
                        console.log(res);
                        var dataList = res.result.list;
                        //dataList.unshift(orgDate[0])
                        cb(dataList,res.result.pageSum);
                    }
                ).fail(
                    function (res){
                        cb([], 0);
                    }
                );
            },
            hide:function(){
                console.log("org下拉隐藏");
                $("#staffIdP").empty();
                $("#staffIdP").append("<div id=\"staffId\" class=\"xm-select-demo\"></div>")
                staffXmS = initStaffXmS();
            }
        });
    }

    var staffXmS = initStaffXmS();
    function initStaffXmS(){
        return  xmSelect.render({
            el: '#staffId',
            filterable: true,
            radio: true,
            //配置远程分页
            paging: true,
            pageSize: 3,//不起效果
            pageRemote: true,
            remoteSearch: true,
            //数据处理
            remoteMethod: function(val, cb, show, pageIndex){
                //val: 搜索框的内容, 不开启搜索默认为空, cb: 回调函数, show: 当前下拉框是否展开, pageIndex: 当前第几页
                var orgId = orgXmS.getValue("value")[0];
                var staffName = val;
                var pageCurrent = pageIndex;
                var pageSize = "10";



                //这里的axios类似于ajax
                var paramDate = {
                    "ORG_ID":orgId,
                    "STAFF_NAME":staffName,
                    "pageCurrent":pageCurrent,
                    "pageSize":pageSize
                };
                var test = "test";
                var ajaxStaffResult = ajaxStaff(paramDate);
                ajaxStaffResult.done(
                    function (res){
                        console.log(test);
                        console.log(res);
                        var dataList = res.result.list;
                        //dataList.unshift(orgDate[0])
                        cb(dataList,res.result.pageSum);
                    }
                ).fail(
                    function (res){
                        cb([], 0);
                    }
                );
            }

        });
    }


    //初始化绑定信息
    initBindInfo();
    /*$(function(){
        initBindInfo();
    });*/
    var cityDate = [];
    var orgDate = [];
    var staffDate = [];

    function initBindInfo(){
        console.log("初始化进来........");
        var resultDo = ajaxInfoBindInfo();
        resultDo.done(function(result){
            console.log("result===");
            console.log(result);
            if(result.resultCode != "0"){
                layer.confirm(data.message);
                return;
            }
            var data = result.result;
            //初始化PCID
            $("#PCID").val(data.PCID);
            //初始化地市

            cityDate.push({
                "name":data.CITYNAME,
                "value":data.CITYCODE
            });
            cityXmS.setValue(
                cityDate
            );
            //初始化团队
            orgDate.push({
                "name":data.CHANNEL_NAME,
                "value":data.ORG_ID,
                "selected":true
            });
            orgXmS.setValue(
                orgDate
            );
            //初始化员工
            staffDate.push({
                "name":data.STAFF_NAME+"("+data.STAFF_CODE+"}",
                "value":data.STAFF_ID
            });
            staffXmS.setValue(
                staffDate
            );

            orgXmS.update();
            //按钮 是新增还是更新
            if(data.IsBindFlag=="0"){
                $("#submitBtn").html("更新");
            }else{
                $("#submitBtn").html("新增");
            }
        });
    }

    $("#submitBtn").click(submitData);


    function submitData(){
        alert("提交订单");

        var pcid = "AAABBBCCC";
        var cityCode = cityXmS.getValue("value")[0];
        var orgId = orgXmS.getValue("value")[0];
        var staffId = staffXmS.getValue("value")[0];
        var paramDate = {
            "PCID":pcid,
            "CITYCODE":cityCode,
            "ORG_ID":orgId,
            "STAFF_ID":staffId
        }
        $.ajax({
            url: 'js/data/org.json',
            type: "post",
            dataType: "json",
            async: true,
            data:paramDate,
            timeout:4000,
            success:function(data){


            },
            error:function(XMLHttpRequest, textStatus, errorThrown){

            },
            complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
                if(status=='timeout'){//超时,status还有success,error等值的情况
                    console.log("超时---------------------");
                }
            }
        });
    }

    function ajaxInfoBindInfo(){
        //获取到pcid
        var pcid = "111";

        var paramDate = {
            "PCID":pcid
        }
        return $.ajax({
            url: 'js/data/bind.json',
            type: "post",
            dataType: "json",
            async: true,
            data:paramDate,
            timeout:4000,
            success:function(data){


            },
            error:function(XMLHttpRequest, textStatus, errorThrown){

            },
            beforeSend: function(XMLHttpRequest){
                layer.load();
            },
            complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
                layer.closeAll('loading');
                if(status=='timeout'){//超时,status还有success,error等值的情况
                    console.log("超时---------------------");
                }
            }
        });
    }

    function ajaxOrg(paramDate){
        return $.ajax({
            url: 'js/data/org.json',
            type: "post",
            dataType: "json",
            async: true,
            data:paramDate,
            timeout:4000,
            success:function(data){


            },
            error:function(XMLHttpRequest, textStatus, errorThrown){

            },
            complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
                if(status=='timeout'){//超时,status还有success,error等值的情况
                    console.log("超时---------------------");
                }
            }
        });
    }

    function ajaxStaff(paramDate){
        return $.ajax({
            url: 'js/data/staff.json',
            type: "post",
            dataType: "json",
            async: true,
            data:paramDate,
            timeout:4000,
            success:function(data){


            },
            error:function(XMLHttpRequest, textStatus, errorThrown){

            },
            complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
                if(status=='timeout'){//超时,status还有success,error等值的情况
                    console.log("超时---------------------");
                }
            }
        });
    }





</script>
<script language="JavaScript"src="js/virtualkeyboard.js"></script>
<script>
    /*window.addEventListener('click', (e) => {
        console.log("自定义点击");
        console.log(e);
        e.stopPropagation();
    })*/
    $('#testi').virtualkeyboard();
    setInterval(function(){
        $('body input').virtualkeyboard();
    },1000)
</script>
</body>
</html>